<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>车享乐-商品列表</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/static/js/slide.js"></script>

    <script type="text/javascript" src="../../static/layui/layui.js"></script>
    <link href="../../static/layui/css/layui.css" rel="stylesheet" rel="stylesheet">
    <script src="../../static/mylayer.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .avatar-img {
            width: 20px; /* 设置头像图片的宽度 */
            height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
            border-radius: 50%; /* 使图片呈现圆形 */
            margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
        }
    </style>
</head>
<body>
<div class="header_con">
    <div class="header">
        <div class="welcome fl">欢迎来到鑫鑫车享乐租车系统!  祝您畅享旅途，鑫鑫相伴！</div>
        <div class="fr">
            <div class="user_link fl">
                <a href="javascript:;">
                    欢迎您：<img class="avatar-img" src="/pic/${user.avatar}"/>
                    ${user.username}
                </a>
                <span>|</span>
                <a href="/page/user/info">用户中心</a>
                <span>|</span>
                <a href="/page/user/order">我的订单</a>
                <span>|</span>
                <a href="javascript:logout()">注销</a>
            </div>
        </div>
    </div>
</div>

<div class="search_bar clearfix">
    <a href="/" class="logo fl"><img src="/static/pic/xx-logo.png" width="180%"></a>
    <div class="search_con fl">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品">
        <input type="button" class="input_btn fr" name="" value="搜索">
    </div>
</div>

<div class="navbar_con">
    <div class="navbar clearfix">
        <div class="subnav_con fl">
            <h1>全部车辆品牌</h1>
            <span></span>
            <ul class="subnav" id="LAY_BrandList">

            </ul>
        </div>
        <ul class="navlist fl">
            <li><a href="/">首页</a></li>
            <li class="interval">|</li>
            <li><a href="/page/car/list">全部车辆</a></li>
        </ul>
    </div>
</div>

<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul id="LAY_CarListNew">

            </ul>
        </div>
    </div>

    <div class="r_wrap fr clearfix">


        <ul class="goods_type_list clearfix" id="LAY_CarList">


        </ul>

        <div class="pagenation">
            <a href="#"><上一页</a>
            <a href="#" class="active">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">下一页></a>
        </div>
    </div>
</div>
<div class="footer">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888    京ICP备*******8号</p>
</div>

<script>
    $.post(
        '/brand?method=selectByBrand',
        function (result) {
            if (result.code == 0) {
                $('#LAY_BrandList').empty();
                $(result.data).each(function () {
                    $('#LAY_BrandList').append('<li><a href="/page/list?brandId=' + this.brandId + '">'+this.brandName+'</a></li>');
                })
            }
        },
        'json'
    );

    $.post(
        '/car?method=selectByCarList',
        function (result) {
            if (result.code == 0) {
                var html = '';
                $('#LAY_CarListNew').empty();
                $(result.data.slice(-2)).each(function () {

                    html += '<li>'
                    html += '  <a href="/page/detail?carId=' + this.id + '&brandId=' + this.brandId + '"><img src="/pic/' + this.image + '"></a>'
                    html += '	 <h4><a href="/page/detail?carId=' + this.id + '&brandId=' + this.brandId + '">' + this.model + '</a></h4>'
                    html += '	 <div className="prize">¥ ' + this.rentalPrice + '</div>'
                    html += '</li>'
                });
                $('#LAY_CarListNew').append(html);
            }
        },
        'json'
    );
    $.post(
        '/car?method=selectByCarList',
        function (carResult) {
            if (carResult.code == 0) {
                var carListHtml = '';
                $('#LAY_CarList').empty();
                $(carResult.data).each(function () {
                    carListHtml += '<li>'
                    carListHtml += '	<a href="/page/detail?carId=' + this.id + '&brandId=' + this.brandId + '"><img src="/pic/' + this.image + '"></a>'
                    carListHtml += '	<h4><a href="/page/detail?carId=' + this.id + '&brandId=' + this.brandId + '">' + this.model + '</a></h4>'
                    carListHtml += '<div className="operate">'
                    carListHtml += '	<span className="prize">¥ ' + this.rentalPrice + '</span>'
                    carListHtml += '	<span className="unit">' + this.rentalPrice + '/天</span>'
                    carListHtml += '	</div>'
                    carListHtml += '</li>'
                });
                $('#LAY_CarList').append(carListHtml);
            }
        },
        'json'
    );
    function logout() {
        layer.confirm(
            '您确认要退出么',
            {icon:3},
            function() {
                location.href = '/user?method=logout'
            }
        );
    }
</script>
</body>
</html>